import React from 'react';
import { Layout, Card } from 'tdesign-react';

const { Content } = Layout;

const AboutPage = () => {
  return (
    <Content style={{ 
      padding: '40px 24px',
      maxWidth: '1200px',
      margin: '0 auto',
      width: '100%'
    }}>
      <div style={{ textAlign: 'center', marginBottom: '40px' }}>
        <h1 style={{
          fontSize: '2.5rem',
          fontWeight: '800',
          color: '#1e293b',
          marginBottom: '10px'
        }}>
          关于我
        </h1>
        <p style={{ 
          fontSize: '1.2rem', 
          color: '#64748b',
          maxWidth: '600px',
          margin: '0 auto'
        }}>
          欢迎来到我的个人博客
        </p>
      </div>
      
      <div style={{
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        gap: '30px'
      }}>
        <Card 
          title={
            <h2 style={{
              fontSize: '1.8rem',
              fontWeight: '700',
              margin: '20px 0 0 0',
              color: '#1e293b'
            }}>
              我的博客
            </h2>
          }
          style={{
            borderRadius: '16px',
            boxShadow: '0 4px 20px rgba(0, 0, 0, 0.08)',
            maxWidth: '800px',
            width: '100%',
            border: 'none'
          }}
          bordered
        >
          <div style={{ 
            lineHeight: '1.8',
            color: '#334155',
            fontSize: '1.1rem'
          }}>
            <p>这是一个使用 React + Webpack + TDesign + JavaScript 构建的个人博客系统。</p>
            
            <h3 style={{
              fontSize: '1.3rem',
              fontWeight: '600',
              marginTop: '24px',
              marginBottom: '12px',
              color: '#1e293b'
            }}>你可以在这里：</h3>
            <ul style={{ 
              paddingLeft: '20px',
              marginBottom: '20px'
            }}>
              <li style={{ marginBottom: '8px' }}>创建和编辑博客文章</li>
              <li style={{ marginBottom: '8px' }}>为文章添加标签</li>
              <li style={{ marginBottom: '8px' }}>查看和管理所有文章</li>
            </ul>
            
            <h3 style={{
              fontSize: '1.3rem',
              fontWeight: '600',
              marginTop: '24px',
              marginBottom: '12px',
              color: '#1e293b'
            }}>技术栈：</h3>
            <ul style={{ 
              paddingLeft: '20px'
            }}>
              <li style={{ marginBottom: '8px' }}>React 18 (函数组件 + Hooks)</li>
              <li style={{ marginBottom: '8px' }}>Webpack 5 (模块打包工具)</li>
              <li style={{ marginBottom: '8px' }}>JavaScript (动态类型)</li>
              <li style={{ marginBottom: '8px' }}>TDesign React (UI 组件库)</li>
            </ul>
          </div>
        </Card>
        
        <Card 
          title={
            <h2 style={{
              fontSize: '1.8rem',
              fontWeight: '700',
              margin: '20px 0 0 0',
              color: '#1e293b'
            }}>
              关于我
            </h2>
          }
          style={{
            borderRadius: '16px',
            boxShadow: '0 4px 20px rgba(0, 0, 0, 0.08)',
            maxWidth: '800px',
            width: '100%',
            border: 'none'
          }}
          bordered
        >
          <div style={{ 
            lineHeight: '1.8',
            color: '#334155',
            fontSize: '1.1rem'
          }}>
            <p>
              欢迎来到我的个人博客！我是一个热爱技术、喜欢分享的开发者。在这里，我会记录自己在编程和技术学习过程中的心得体会，分享一些实用的技术干货。
            </p>
            <p>
              我专注于前端开发领域，对 React、Vue 等现代前端框架有深入的理解和实践经验。同时，我也关注后端技术、用户体验设计等方面的知识。
            </p>
            <p>
              除了技术文章，我也会分享一些个人生活感悟和读书笔记。希望通过这个博客平台，能与更多志同道合的朋友交流学习。
            </p>
            <div style={{ 
              marginTop: '20px',
              padding: '20px',
              backgroundColor: '#f8fafc',
              borderRadius: '12px',
              borderLeft: '4px solid #3b82f6'
            }}>
              <h4 style={{
                margin: '0 0 10px 0',
                fontSize: '1.2rem',
                color: '#1e293b'
              }}>联系我：</h4>
              <p style={{ margin: '5px 0' }}>📧 邮箱: example@email.com</p>
              <p style={{ margin: '5px 0' }}>🐙 GitHub: github.com/username</p>
              <p style={{ margin: '5px 0' }}>💼 LinkedIn: linkedin.com/in/username</p>
            </div>
          </div>
        </Card>
      </div>
    </Content>
  );
};

export default AboutPage;